<template>
  <div class="zlst-tree-table--primary">
    <div class="zlst-tree-table__header">
      <filters v-model="conditions" v-bind="$attrs" :org-id="orgId" />
    </div>
    <div class="zlst-tree-table__body">
      <div class="zlst-tree-table__body-aside">
        <zlst-tree @clickTreeRow="clickTreeRow" />
      </div>
      <div class="zlst-tree-table__body-container">
        <user-table v-model="selections" :org-id="orgId" :conditions="conditions" @change="changeEmp" />
      </div>
    </div>
  </div>
</template>

<script>
import Filters from './filters'
import UserTable from './checkbox-table'
import ZlstTree from './tree'

export default {
  name: 'ZlstOrgSearchUserModal',
  components: {
    Filters,
    UserTable,
    ZlstTree
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      conditions: {},
      tableData: [],
      tableTotal: 0,
      orgId: null,
      tag: 1,
      statusFlag: 1,
      rows: 20,
      selections: this.value
    }
  },
  methods: {
    clickTreeRow(orgId) {
      this.orgId = orgId
    },
    changeEmp(val) {
      this.$emit('change', val)
    },
    searchUser() {
      console.log(111)
    }
  }
}
</script>

<style lang="scss" scoped>
  .zlst-tree-table--primary {
    width: 100%;
    // height: 100%;
    height: 460px;
    display: flex;
    flex-direction: column;
    .zlst-tree-table__body {
      height: 100%;
      .zlst-tree-table__body-aside {
        height: calc(100% - 40px);
        overflow-x: hidden;
        overflow-y: auto;
      }
      .zlst-tree-table__body-container{
        position: relative;
      }
    }
    .zlst-tree-table {
      // &__header {
      // }
      &__body {
        display: flex;
        flex: 1;
        background-color: #f8f9fa;
        &-aside {
          width: 360px;
          padding: 20px;
          flex-shrink: 0;
        }
        &-container {
          flex: 1;
          padding: 20px;
          border-left: 1px solid #ededed;
        }
      }
    }
  }
</style>
